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Abstract 


Application Development is not only limited to the business or promotional field, but it 
also helps to provide the necessary services to the common people across the world by 
creating an interaction between the companies and the customers through the web- 
site. It also creates a platform for the common people who have the ability to attract 
the audience using their talent. We can take the example of various blog writers, online 
councilors and fashion influencers who have a large audience because of their quality 
content and knowledge in their field. We have generally seen how the electronic com- 
panies have marked their presence on the online platform via the website which ena- 
bles the users to contact the company easily. Online retail companies interact with the 
users via website and provide the orders at the doorsteps of the people. There are var- 
ious news agencies which had created their website which keeps the users updated 
with the latest national and international articles. The website development has helped 
to create a link between the people and the companies, but behind all these facilities 
there is a powerful language and commands that holds these computational activities 
and data transfers which helps to create a good interaction between the users and the 
website owners. Web developers are classified into Front-end and Back-end web devel- 
opers, Front-end developers help to create an interactive interface that can be easily 
accessed by the users, whereas Back-end development deals with the main work that 
is done behind the screens. We can say that it helps to power the website by managing 
data transfer and other computational activities. In this project, the importance of 
Django and back-end web development is explained. Using the tools and commands of 
these languages we can make an interactive and user-friendly interface that can be 
easily accessed by people. Back-end was earlier known for limited purposes but now 
when it is explored thoroughly proved to be one of the best languages for website de- 
velopment, gaming, Artificial Intelligence, and highly advanced mobile applications. 
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1. Introduction 


The basics of web development using Django to build blog applications that have the (CRUD) Create, Read, Update, Delete 
functionality. Django is a widely used free, open-source, and high-level web development framework.[5] It provides a lot of 
features to the developers "out of the box," so development can be rapid. However, websites built from it are secured, scalable, 


and maintainable at the same time. 


2. Objective 


The goal of this project is to build a blog application and a Web App (Weather app) which are updated through an administra- 
tion panel. 


3. Virtual Environment 


Virtual Environment act as dependencies to Python-related project. It works as a self-contained container or an isolated envi- 
ronment where all Python-related package [5] and the required versions related to specific project are installed. Since new 
versions of Python, Django, or packages, etc. will roll out,[4] through the help of a Virtual Environment, you can work with 
older versions that are specific to any project. 


Steps to create a Virtual Environment: 
1.To create the new directory named 'project-blog' by using 'mkdir' command in your Desktop. 
2.Change the directory to 'project-blog’ by using 'cd' command. 


mkdir projet 


' cd project-blog 





3.The virtual environment is created by using 'python -m venv env', where env is our virtual environment shown by ‘Is' com- 
mand. 


1 
A y 





4.For Activating your Virtual Environment: The Virtual Environment can be activated by using the 'source' command where the 
‘Scripts’ folder needs to be enabled or activated. 
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Del J@DESKTOP-03TH7I0 ~/Desktop/project-blog 
$ source env/Scripts/activate 


Gis 
De] J@DESKTOP-O3TH?IO ~/Desktop,project-blog 
B 





The ‘env' will be shown in the parenthesis when successfully activated the Virtual Environment. 


5.Installing the required package: We can use ‘pip install django’ to install Django in your specific Virtual Environment. 


Cenv) 
Del I@DESKTOP-O3TH?7IO ~/Desktop,’projzect-blog 
$ pip install django 
Collecting django 
Using cached https://T1 les. pythonhosted. org/packages /55 /d1/8ade70e65fal57e1903 
Fed078305.ca5 3b6819ab212d9f bbeb 55 afcheaze/D ]ango-3.0. 2-py3-none-any. whl 





4. Creating a Django Project 


1.The first step is creating project by using the 'django-admin startproject project_name' command, where 'project_name' is 
‘django_blog' in our case 


_ 


(env) 

Del 1@DESKTOP-O3TH7I0 ~/Desktop/project-blog 
§ django-admin startproject django_blog 

(env) 





2.Change the directory to the newly created project using 'cd' command and to view the created file using ‘Is' command. 


(env) 
Del] J@DESKTOP-O3TH7IO ~/Desktop/project-blog 
$ cd django_blog/ 
(env) 
De] J@DESKTOP-O3TH?IO ~/Desktop/project-blog/django_blog 
$ Is 
manage. py 


(env) 
De] J@DESKTOP-O3TH?I0 ~/Desktop/project-blog/django_blog 
S 
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3.we can run our project by using ‘python manage.py runserver'. 


6 cd django_blog; 


(env) 





4.The project can be viewed in our favorite browser (Google Chrome, Mozilla Firefox, etc.). We can come into our browser and 
type ‘localhost:8000' or '127.0.0.1:8000' in the URL, as shown below in figure 1. 





< = A © @® localhost ; ece vv 


django View release notes for Django 3.0 


The install worked successfully! Congratulations! 


DEBUG=True 


Django Documentation ¢y. Tutorial: A Polling App oo Django Com 


munity 
| tribut 





Figure 1. Django local host installation screen 


4.1. Starting the new Project 


For creating a new Django project, it is a 2-step process, which can be seen below. 


1.To create an app by using ‘python manage.py startapp app_name' command, where app_name is ‘blog’ in our case. In Django, 


there are many apps to the single project where each app serves as single and specific functionality to the project. 


Journal of Management and Service Science @® 
: (JMss) \4 


A2Z Journals NA 


A. Chandiramani et al. 





| @DE SkKTOP-O3TH? JO 


python manage. py 


fi fo 
= | 


T @DE SK TOP-O3STH? JO 


~/Desktop,project-blog/django_blog 


Se CF] es be CO] eS 


db. sql manage. py™ 





2.To make our project let know about our newly created app by making changes to the ‘django_blog/settings.py' 
INSTALLED_APP section. 


FOLDERS settings.py 
django_blog # Quick-start development settings - 
— # See h ://docs.djangoproject 
migrations 
‘* _init_-py # SECURITY WARNING: keep the secret key used in production secret! 
* admin.py SECRET _KEY '&) c&#hju%(mosk@-* rhiu8*fa4+@_ nojz(q(zloh2n*jsbq' 
‘© apps.py 
/* models.py # SECURITY WARNING: don‘*t run with debug turned on in production! 
* tests.py DEBUG 
* vie NS.DY 
hapa ALLOWED_HOSTS = [] 
django_blog a 
__pycache__ 
(* _init_.py # Application definition 
* asgi.py 
/* settings.py INSTALLED_APPS [ 
/* urls.py ‘django.contrib.admin’ , 
/* wsgi.py *django.contrib.auth’', 
[3 db.sglite3 ‘django.contrib.contenttypes', 


“* manage.py 


“django. 
‘django. 


“diango. 


contrib. 
-messages , 
-staticfiles', 


contrib 
contrib 


sessions’, 


‘blog’ 
J 


MIDDLEWARE 
*django.middleware.security.SecurityMiddleware’ , 
‘django.contrib.sessions.middleware.SessionMiddleware’ , 
*django.middleware.common.CommonMiddleware’ , 
‘django.middleware.csrf.CsrfViewMiddleware’ , 
*django.contrib.auth.middleware.AuthenticationMiddleware’ , 
‘django. contrib.messages.middleware.MessageMiddleware’ , 
*django.middleware.clickjacking.XFrameOptionsMiddleware’ , 


] 


ROOT _URLCONF ‘django _blog.urls’ 





4.2. Changing in our Models 


Django uses 'SQLite' as a default database, which is light can only be used for small projects, that is fine for this project. ‘Object 
Relational Mapper (ORM)' is used which makes it uncomplicated to work with the database. The true database code is not 


written, since the database tables are created through the help of 'class' keyword in 'models.py’. 


Inside 'blog/models.py', we are creating a new model named 'Post'. This is a class will become a database table after that 
which currently inherits from models. As in a standard blog, a certain 'Post' contains a title, which will be a field called Char 
Field. It is a text-based column and accepts mandatory argument as 'max_length', which happens to be 50 in our case. Also, 
there is another field named ‘content’, which is the Text Field, which contains the detail text of the 'Post' as in a standard blog. 
The double underscore(‘str') method is defined, which overrides the field ‘title’ and returns the name of actual ‘title’ instead 


of some objects. 
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S| 


File Edit Selection Find View Goto Tools Project Preferences Help 
FOLDERS dmii models.py 
django_blog from django.db import models 
blog 
__pycache_ # Create your models here. 
migrations ISS Post(model i lelel=ai ») > 
pycache title models .CharField(max_length 
*« 0001 nitial-py content = models. TextField() 
01_ -Py 
+ init__.py z a 
= ——! (5 ns 2  €-1-2 & oD I 
* _ init_.py ett .title 
* admin.py 
* apps.py 


/* models.py 
* tests.py 
* views.py 
django_blog 
__pycache_ 
* _ init__.py 
* asgi.py 
* settings.py 
* urls.py 
* wsgi.py 
(4 db.sqlite3 


* manage.py 





4.3. Making Migrations 


‘python manage.py make migrations’ is a first step process which reads the 'models.py' after its creation. 


(env) 
Del J@DESKTOP-O3TH7IO ~/Desktop,project-blog/django_blog 
§ python manage. py makemigrations 
Migrations for ‘blog’: 
blog\migrations',0001_i1nitial. py 
- Create model Post 





Migrating to the database: This is the 2nd step where 'python manage.py migrate’ read the newly created folder 'migrations' 
thus creating the database. 


~/Desktop/project-blog/django_blog 
§ python manage. py mgrate 
Iperations to perform: 


Apply all mgrations: admin, auth, blog, 
tuUnAINgG migrations: 
No migrations to apply. 





Registering to the admin: Let's go to 'blog/admin.py' and do a import of a models called 'Post' by make use of 'from models 
import Post’. For registering models to the admin, command as follows 'admin.site.register(Post)’. 
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File Edit Selection Find View Gote Tools Project Preferences Help 


FOLDERS id admin.py » 
django_blag from django.contrib import admin 


lk 
1ere . 


blag 
_pycache_ 
migrations 


dels 
_pycache_ admin.site. 
/* 0001_initial.py 
/* _init_py 
‘x init_.py 
/* admin.py 


/* apps.py 
/* models.py 


= 





/* tests.py 


Creating SuperUser and Viewing in the Administration panel: we need to create a SuperUser before accessing the ‘admin’ 
panel. To do so, use 'winpty python manage.py createsuperuser'. 


=" 
= 
a 
im be 
= 
= 
a 
* 





Run server in the background in bash by command python manage.py runserver. 
€ C @ localhost:3000/admin 


Fill out details afterward, i.e., the username and password that you've created earlier as shown in figure 2: 


@ Log in | Django site admin x a 


a Cc @ localhost:8000/admin/login/?next=/admin/ 


1D) Flare lom-lelaalialite-lelole 


Username: 


admin 


Password: 


Figure 2(a). Django Administration window 
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@ Site administration | Djangosit xX + 


€ > CGC @ localhost:8000/admin/ ok 





Site administration 


: 
Recent actions 





Groups + Add # Change 

Users + Add Change My actions 
None available 

Posts + Add # Change 


Figure 2(b). Django Administration window 


@ Add post | Django site admin x + = 
€ > CG  @ localhost:8000/admin/blog/post/add/ * 0 6b’aoaQi Ai 


WELCOME, ADMIN. VIEW SITE / CHANGE PASSWORD / LOG 





Home > Blog > Posts » Add post 


Add post 
Title: First Post 
Content: This is my first post feels exciting. 


Save and add another Save and continue editing SAVE 


Figure 2(c). Django Administration window 


5. Create a Web App (Weather App) 


Let us build a simple Django application that displays the weather of various cities. To get current weather data, let us use 
the Open Weather Map API. We will work with the database and create a form, therefore the concepts used here can be 
applicable for more complicated projects. 

The Admin Dashboard: Next we will look at admin dashboard given by Django. To do that, 1st we have to migrate the database, 
which means Django will generate the pre-defined tables that is needed for the default apps. To do this, run the migrate com- 
mand.[8] 


e python manage.py migrate 


Journal of Management and Service Science 


@® 
A2Z pene NA 


A. Chandiramani et al. 


By running this command, Django has generated an SQLite database for us, default database in our settings, and it has added 
several tables to our database. we will know if our database was created if we see a new db.sqlite3 file in our project directory. 
One of the table Django gives you is a user table, which can be used to store users in our app. The app we are building does 
not need to have any users having the admin user will allow you to access the admin dashboard. To create the admin user, we 


will run the create superuser command. 


e python manage.py createsuperuser 


Give a username, email address, and a password for your admin user. Once you have done it, you will need to start your server 
again and navigate to admin dashboard. 


° python manage.py runserver 


Then go to server/admin. We can go to that page is because admin is set up in your urls.py. If we log in with the username, 
password we just created, we should see the Django Admin Dashboard. Groups & users represent two models Django give us 
access to. Model are just codes representations of tables in the database. Even though Django created additional tables, there 
is no need to access the rest of them directly, therefore no models were created. Now leave the admin dashboard for now & 


go to the code. We are required to create an app into our project for the weather app. 


5.1. Creating the App 


We are required to create a new application to handle everything regarding the weather. To create that app: 


0 python manage.py startapp weather 


By startapp, Django has add a new directory & more files to our project. The newly files generated, let’s create another file 


called urls.py in the app directory. 


urls.py 
from django.urls import path 


urlpatterns = [ 


| 


This file is same as to the urls.py in our weather directory. The distinction is that this urls.py file contain all the URL that are 
relevant to this app itself. We are not specifying a URL yet, rather we can set up our project to recognize the app and route any 
URL specific to the app urls.py file. First, check the INSTALLED_APPS list and then add this app to the list. 


the_weather/the_weather/settings.py 


INSTALLED_APPS = [ 
'django.contrib.admin’, 
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‘django.contrib.auth’, 
'django.contrib.contenttypes’, 
‘'django.contrib.sessions’, 
'django.contrib.messages’, 
'django.contrib.staticfiles'’, 
‘weather’, 


This lets Django know that we want to use our weather app in the project. By doing that, Django will know where the migrations 
and the URL are. Afterward, we need to modify the main urls.py to point to our weather app urls.py file. To do that, we add on 
a line under the existing path for admin dashboard. We are also required to import include so we can point to our 


app urls.py file. 


the_weather/the_weather/urls.py 
from django.contrib import admin 
from django.urls import path, include 


urlpatterns = [ 
pathCadmin/’, admin.site.urls), 
path(", include('weather.urls’)), 


The null string means that we won’t utilize an endpoint for the entry point to our app. Instead we'll let our app handle any 
specific endpoint. We could have put up something like path [‘weather/’, ...], which would have meant we would have to 


type server/weather/ to get anything with our weather app. 


5.2. Adding the Template and View 


Next, we need to add template to our project. A template in Django is an HTML file that allow for extra syntax that make the 
template dynamic. We will be able to do things like add variables, if statement, and loops, among all other things.[9] We have 


an HTML files, but this will be enough for you to start. We are going to create a template directory to put that file in. 


° cd weather 
0 mkdir templates && cd templates 
° mkdir weather 


We created another directory with the similar name as our application. We did this because Django combine all the template 


directories by the various apps we have. To prevent filename being duplicated, we can take the name of our app to prevent 
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creating the duplicates. Inside of our weather directory, creating a new file called index.html. This will be the main template. 
We have our template created, let us create a view and URL combined so we can actually have this in our app. Views in Django 


are either functions or classes. since we are creating a simple view, we will create a function. Add this function to your views. py: 


the_weather/weather/views.py 
from django.shortcuts import render 


def index(request): 


return render(request, ‘weather/index.html’) #returns the index.html template 


We are naming our view index because this will be at index of the app, which is the root URL. having the template render, we 
would return request, which is must for the render function, & the name of our template file we want to render, like in this 
case weather/index.html. Let’s add this URL that will send this request to this view. The urls.py for this app, update the urlpat- 


terns list. 


the_weather/weather/urls.py 
from django.urls import path 
from . import views 


urlpatterns = [ 
path(", views.index), #the path for our index view 


This allows us to refer the view we created. Django goes to match any URL without the endpoint and route it to view function 


createded by us. Go back to your project root, start the server again. 


° python manage.py runserver 


What we can see now is just the result of HTML you have in index.html file. You will see an input to add cities and the weather 
for Lucknow. However, the form does not work, and the weather is nothing more than a placeholder, Now we’ll be creating 


those for this app. 


5.3. Using the Weather API 


What we need to do now Is have to sign up for the “Open Weather Map API”. This will allow us get real-time weather for any 
city that we add in our app[1][2][3]. Now we go to the site, create an account, and then go to the API keys on their dashboard. 
Enter a name & generate a new API key. This key allows us to use the API for obtaining the weather. The 1 endpoint we will 
use is shown below, so you can see following data that gets returned from modifying the following URL with our API key and 
navigating to the URLs in your browser [1][2][3]. It takes a few minutes for our API key to become active http://api.openweath- 


ermap.org/data/2.5/weather?q=lucknow&units=imperial&appid=YOUR_APP_KEY 
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With this, let us add in a request to obtain the data into our app. First, we will need to install request so we can call our API 


from inside our app. 


° pipenv install requests 


Let us update our index view so to send a request to our URL we have. 
the_weather/weather/views.py 


from django.shortcuts import render 
import requests 


def index(request): 

url = ‘http://api.openweathermap.org/data/2.5/weather?q={ } &units=imperial &ap- 
pid=YOUR_APP_KEY' 

city = ‘Lucknow' 

city_.weather = requests.get(url.format(city)).json() 


return render(request, 'weather/index.html') #returns the index.html template 


With those 3 lines, we are adding the URL that we would send a request to. We will make the part for the city just a placeholder 
for when we allow user to add their own city. For now, we will set the city to be Lucknow, but later this will be set to the cities 


from the database. Now run the server again and we can see the details of the city regarding the weather 


5.4. Displaying the Data in the Template 


Next, we need to pass the data to the template so it can be displayed to the user. Let’s create a dictionary to hold all of the 


data we need. Of the data returned, we need temperature, description, and icon. 


the_weather/weather/views.py 
def index(request): 


weather = { 
‘city’ : city, 
‘temperature’ : city_weather['main']['temp’], 
‘description’ : city_weather['weather'][0]['description’], 
‘icon’ : city_weather['weather'|[O]['1con'] 


return render(request, ‘weather/index.html’) #returns the index.html template 
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Now that we have the information we need, we can pass that to our template. To pass it to our template, we’ll create a variable 


named context. This will be a dictionary which will allow us to use its values inside our template. 


the_weather/weather/views.py 
def index(request): 


context = {'weather' : weather} 
return render(request, ‘weather/index.html’, context) #returns the index.html template 


And then in render, we will add the context as the 3rd argument. With the weather data add inside of context, let us go to the 
template to add our data. Inside of the template, all we want to do is modify our HTML to use variables rather than values | 
typed in. Variables will be using {{}} tags [9], and they will refer to anything inside of our context dictionary. Note: Djangcity will 
give you the city name. We do not use weather|['city'] like we would in Python. With all the variables replaced, we should now 
see the current weather for our city. We will create a table in the database to hold the city that we want to know the weather 


for. We will create a model for this. Let us go to the models.py file in your weather app, and add the following: 


the_weather/weather/models.py 


from django.db import models 


class City(models.Model): 
name = models.CharField(max_length=25) 


def _str_(self): 
return self.name 


class Meta: 
verbose_name_plural = ‘cities’ 


This will create a table in the database that will have a column named name, which is the cities name. This city will be a- 
charfield, which is a string. To get the changes in our database, we have should run make migrations to generate the code that 
updates the database and migrate to apply for those changes. python manage.py makemigration. Python manage.py migrate: 
We need to make it so we can see this model from our admin dashboard. To achieve that, we need to register this in our ad- 


min.py file. 


the_weather/weather/admin.py 

from django.contrib import admin from .models import City admin.site.register(City) 

The city is added as an option on the admin dashboard. We can then add some cities into the admin dashboard. I'll start with 
three: Ludhiana, Tamil Nadu, and Lucknow[3]. With the entries in the database, we need to query these entries in our view. 


Start by import the City model and then query that model for all objects. 
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the_weather/weather/views.py 

from django.shortcuts import render 
import requests 

from .models import City 
the_weather/weather/views.py 


def index(request): 

url = ‘http://ap1.openweathermap.org/data/2.5/weather?q={ } &units=imperial&ap- 
pid=YOUR_APP_KEY' 

cities = City.objects.allQ 


Since we have the cities, we want to loop it over them & get the weather for each 1 and add it to the list that will eventually 
be passed to the template. This will just be a variation which is of what we did in the first case. Other difference is we want to 
looping and appending each dictionary to that list. We’ll remove the original city variable in place of a city variable in the loop: 
the_weather/weather/views.py 


def index(request): 
weather_data = [] 
for city in cities: 
city_weather = requests.get(url.format(city)).json() 
weather = { 
‘city’ : city, 
‘temperature’ : city_weather['main']['temp’], 


‘description’ : city_weather['weather'][0]['description’], 
‘icon’ : city_weather['weather' |[O]['1con'] 


weather_data.append(weather) 
context = {'weather_data' : weather_data} 


Now let’s update the context for to pass this list instead of the single dictionary. 
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the_weather/weather/views.py 


context = {'weather_data' : weather_data} 


Next, inside of the template, we want to loop over this list & generate the HTML for every city in the list. For this, we can put 
up a for loop around the HTML that will generate a single box for that city. After updating the HTML file[9] we can see the data 


for all the cities we have in the database. 


5.5. Creating the Form 


The last thing we need to do is allow our user to add a city straight in the form. For that, we need to generate a form. We could 
generate the form directly, but since our form will have exact same field as our model, we can use our ModelForm. Create a 
new file called forms.py. 


the_weather/weather/forms.py 
from django.forms import ModelForm, TextInput 
from .models import City 


class CityForm(ModelForm): 
class Meta: 
model = City 
fields = ['‘name'] 
widgets = { 
‘name’: TextInput(attrs={'class' : ‘Input’, ‘placeholder’ : 'City Name'}), 


j 


To view this form, we need to create it in the view and pass it to our template. To do that, let us update the index video that 
will create the form. We will replace the old city variable the same time because we no longer need it. We can also need to 
update context so the form gets passed to the template. 


the_weather/weather/views.py 
def index(request): 


form = CityForm() 
weather_data = [] 


context = {'weather_data' : weather_data, 'form' : form} 
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Now in the template, let us update the form section so that we can use the form from our view & a csrf_token, which is needed 
for POST requests in Django. With the form in HTML working, we now want to handle the form data as this comes in[9]. For 
that, we’ll write an if block checking for the POST request. We want to add the check for this type of request before we start 


grabbing our weather data, so we immediately obtain the data for the city we add. 


the_weather/weather/views.py 
def index(request): 
cities = City.objects.allQ 


url = ‘http://ap1.openweathermap.org/data/2.5/weather?q={ } &units=imperial&ap- 
pid=YOUR_APP_KEY' 


if request.method == 'POST': 
form = CityForm(request.POST) 


form.save() 


form = CityForm() 


By passing request.POST, we will be able to validate our form data. Now you should be able to type in the name of a city, click 
add, and see it show up. | will add Mumbai as the next city. When we drop out of the if block, the form will be recreated so we 
can add another city if we choose. 


Conclusion 


We now have a way to keep track of the weather for multiple cities in our app. We had to work with various parts of Django to 
get this working: views, models, forms, and templates. We also had to use the Python library requests to get the actual weather 
data[1][2][3]. 
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